<template>
  <div class="page">
    <div class="page-nav">
      <img @click="router.back()" class="page-left" src="@/assets/images/pageLeft.png" alt="">
      个人数据中心
    </div>
    <div class="box">
      <div class="u-flex" style="gap: 20px;margin-bottom: 20px;">
        <div class="chart" id="chartDom1"></div>
        <div class="chart" id="chartDom2"></div>
      </div>
      <img style="width: 100%;display: block;" src="@/assets/images/d8.png" alt="">
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';

const router = useRouter()
const form = ref({})

onMounted(() => {
  var chartDom1 = document.getElementById('chartDom1');
  var myChart1 = echarts.init(chartDom1);
  var option1;

  option1 = {
    xAxis: {
      type: 'category',
      data: ['8月第一周', '第二周', '第三周', '第四周', '第五周(预测)']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [-150, -230, -224, -218, -135],
        type: 'line'
      }
    ]
  };

  option1 && myChart1.setOption(option1);

  var chartDom2 = document.getElementById('chartDom2');
  var myChart2 = echarts.init(chartDom2);
  var option2;

  option2 = {
    xAxis: {
      type: 'category',
      data: ['8月第一周', '第二周', '第三周', '第四周', '第五周(预测)']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135],
        type: 'line'
      }
    ]
  };

  option2 && myChart2.setOption(option2);
})
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  gap: 56px;
  padding: 0 0 10vh;
  background-color: #F5F6F8;
  .page-nav {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    background: #FFF;
    position: relative;
    color: #000;
    font-size: 28px;
    justify-content: center;
    margin-bottom: 20px;
    .page-left {
      display: block;
      width: 16px;
      height: 28px;
      position: absolute;
      left: 140px;
      top: 26px;
      cursor: pointer;
    }
  }
  .box {
    width: calc(100vw - 280px);
    margin: 0 auto;
    .chart {
      flex: 1;
      height: 508px;
      border-radius: 6px;
      border: 0.8px solid #E1E1E1;
      background: #FFF;
    }
  }
}
</style>